<script setup xmlns="http://www.w3.org/1999/html">
import {nextTick, onMounted, onUnmounted, ref, watch} from 'vue';
import {getChatHistory, getChatRecords, streamChatFetch} from '../api/chat'
import ChatMessage from '../components/ChatMessage.vue';
import {v4 as uuidv4} from 'uuid';
// 新增导入
import {marked} from 'marked';
import DOMPurify from 'dompurify';

// 模拟对话数据
const chatMessages = ref([]);

// 输入框消息
const inputMessage = ref('');

// 模拟历史对话
// 获取对话历史记录
const chatHistory = ref([
  {conversationId: 1, title: 'AI Chat Tool Ethics'},
  {conversationId: 2, title: 'AI Chat Tool Impact Writing'},
  {conversationId: 3, title: 'New chat'}
]);

onMounted(async () => {
  // 根据用户id 查询历史记录
  const params = {userId: 1}
  const res = await getChatHistory(params);
  console.log("获取对话历史记录列表:{}", res);
  chatHistory.value = res.data.data;
});

// 组件卸载时清理定时器
onUnmounted(() => {
  if (scrollTimeout.value) {
    clearTimeout(scrollTimeout.value);
  }
});


// 当前选中的对话
const activeChatId = ref();

// 监听activeChatId的变化
// watch(activeChatId, async (newVal, oldVal) => {
//   // 根据对话id 获取到对话历史记录
//   console.log("根据对话id查询对话详情", newVal);
//   const params = {conversationId: newVal};
//   const res = await getChatRecords(params);
//   console.log("获取到对话详情内容:{}", res.data);
//
//   chatMessages.value = res.data.data;
// })

const res = ref({});
const isStreaming = ref(false);
const chatMessagesContainer = ref(null);

// 新增：智能滚动相关变量
const isUserAtBottom = ref(true);
const shouldAutoScroll = ref(true);
const lastScrollTop = ref(0);
const scrollTimeout = ref(null);

// 检测用户是否在底部
const checkIfUserAtBottom = () => {
  if (!chatMessagesContainer.value) return true;
  
  const container = chatMessagesContainer.value;
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const clientHeight = container.clientHeight;
  
  // 如果滚动位置距离底部小于等于20px，认为用户在底部
  const threshold = 20;
  const isAtBottom = scrollHeight - scrollTop - clientHeight <= threshold;
  
  // 检测用户是否主动向上滚动
  const isScrollingUp = scrollTop < lastScrollTop.value;
  lastScrollTop.value = scrollTop;
  
  // 如果用户主动向上滚动，禁用自动滚动
  if (isScrollingUp && !isAtBottom) {
    shouldAutoScroll.value = false;
    console.log('用户向上滚动，禁用自动滚动');
  }
  
  isUserAtBottom.value = isAtBottom;
  
  // 只有当用户在底部时才启用自动滚动
  if (isAtBottom) {
    shouldAutoScroll.value = true;
    console.log('用户滚动到底部，启用自动滚动');
  }
  
  return isAtBottom;
};

// 监听滚动事件（带防抖）
const handleScroll = () => {
  // 清除之前的定时器
  if (scrollTimeout.value) {
    clearTimeout(scrollTimeout.value);
  }
  
  // 设置新的定时器，延迟100ms执行滚动检测
  scrollTimeout.value = setTimeout(() => {
    const wasAtBottom = isUserAtBottom.value;
    const isNowAtBottom = checkIfUserAtBottom();
    
    // 如果用户从非底部滚动到底部，重新启用自动滚动
    if (!wasAtBottom && isNowAtBottom) {
      shouldAutoScroll.value = true;
    }
  }, 100);
};

// 智能滚动到底部
const smartScrollToBottom = async () => {
  // 只有在应该自动滚动时才执行滚动
  if (!shouldAutoScroll.value) {
    console.log('自动滚动已禁用，跳过滚动');
    return;
  }
  
  await nextTick();
  if (chatMessagesContainer.value) {
    chatMessagesContainer.value.scrollTop = chatMessagesContainer.value.scrollHeight;
    console.log('执行智能滚动到底部');
  }
};

// 强制滚动到底部（用于用户手动触发的情况）
const forceScrollToBottom = async () => {
  await nextTick();
  if (chatMessagesContainer.value) {
    chatMessagesContainer.value.scrollTop = chatMessagesContainer.value.scrollHeight;
    // 滚动到底部后，重新启用自动滚动
    shouldAutoScroll.value = true;
    isUserAtBottom.value = true;
    console.log('强制滚动到底部完成，重新启用自动滚动');
  }
};

// 原有的滚动到底部方法（保持兼容性）
const scrollToBottom = async () => {
  await smartScrollToBottom();
};

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim() || isStreaming.value) return;

  const userMessage = inputMessage.value.trim();

  // 添加用户消息
  chatMessages.value.push({
    id: Date.now(),
    type: 'USER',
    content: userMessage,
    timestamp: new Date().toLocaleTimeString()
  });

  // 清空输入框
  inputMessage.value = '';

  // 创建一个空的AI消息用于流式更新
  const assistantMessageId = Date.now() + 1;
  const assistantMessage = {
    id: assistantMessageId,
    type: 'ASSISTANT',
    content: '',
    timestamp: new Date().toLocaleTimeString(),
    isStreaming: true
  };

  chatMessages.value.push(assistantMessage);
  isStreaming.value = true;

  // 发送消息后，重置滚动状态并滚动到底部
  shouldAutoScroll.value = true;
  isUserAtBottom.value = true;
  await nextTick();
  if (chatMessagesContainer.value) {
    chatMessagesContainer.value.scrollTop = chatMessagesContainer.value.scrollHeight;
  }
  
  // 发起流式请求
  const params = {
    query: userMessage,
    chatId: activeChatId.value
  };

  try {
    await streamChatFetch(
        params,
        // onMessage: 接收到新的数据片段
        (chunk) => {
          // 找到对应的助手消息并更新内容
          const messageIndex = chatMessages.value.findIndex(msg => msg.id === assistantMessageId);
          if (messageIndex !== -1) {
            chatMessages.value[messageIndex].content += chunk;
            // 使用智能滚动，在每次内容更新后检查是否需要滚动
            nextTick(() => {
              // 只有在应该自动滚动时才执行滚动
              if (shouldAutoScroll.value) {
                smartScrollToBottom();
              }
            });
          }
        },
        // onComplete: 流式传输完成
        () => {
          console.log('Stream completed');
          const messageIndex = chatMessages.value.findIndex(msg => msg.id === assistantMessageId);
          if (messageIndex !== -1) {
            chatMessages.value[messageIndex].isStreaming = false;
          }
          isStreaming.value = false;
        },
        // onError: 发生错误
        (error) => {
          console.error('Stream error:', error);
          const messageIndex = chatMessages.value.findIndex(msg => msg.id === assistantMessageId);
          if (messageIndex !== -1) {
            chatMessages.value[messageIndex].content = '抱歉，发生了错误，请稍后重试。';
            chatMessages.value[messageIndex].isStreaming = false;
          }
          isStreaming.value = false;
        }
    );
  } catch (error) {
    console.error('Failed to start stream:', error);
    const messageIndex = chatMessages.value.findIndex(msg => msg.id === assistantMessageId);
    if (messageIndex !== -1) {
      chatMessages.value[messageIndex].content = '连接失败，请检查网络后重试。';
      chatMessages.value[messageIndex].isStreaming = false;
    }
    isStreaming.value = false;
  }
};

// 创建新对话
const createNewChat = () => {
  // 添加新对话到历史列表
  const newChat = {
    conversationId: uuidv4(),
    title: 'New chat'
  };
  chatHistory.value.unshift(newChat);
  // 选中新创建的对话
  activeChatId.value = newChat.conversationId;

  // 重置聊天消息
  chatMessages.value = [];
  
  // 重置滚动状态
  shouldAutoScroll.value = true;
  isUserAtBottom.value = true;
};

// 切换对话
const switchChat = async (chatId) => {
  activeChatId.value = chatId;
  // 在实际应用中，这里应该加载对应对话的消息
  console.log("根据对话id查询对话详情", chatId);
  const params = {conversationId: chatId};
  const res = await getChatRecords(params);
  console.log("获取到对话详情内容:{}", res.data);

  chatMessages.value = res.data.data;
  
  // 切换对话后，重置滚动状态并滚动到底部
  shouldAutoScroll.value = true;
  isUserAtBottom.value = true;
  await nextTick();
  forceScrollToBottom();
};

// 清除对话
const clearConversations = () => {
  // 在实际应用中，这里应该清除所有对话
  if (confirm('确定要清除所有对话吗？')) {
    chatHistory.value = [];
    createNewChat();
  }
};

// 切换主题模式
const toggleTheme = () => {
  // 在实际应用中，这里应该切换亮色/暗色模式
  document.body.classList.toggle('dark-mode');
};

// 点击示例问题
const useExample = (example) => {
  inputMessage.value = example;
  sendMessage();
};

// 添加渲染方法
const renderMarkdown = (content) => {
  return DOMPurify.sanitize(marked.parse(content));
}



</script>

<template>
  {{ res.value }}
  <div class="chat-container">
    <!-- 左侧边栏 -->
    <div class="sidebar">
      <!-- 新建对话按钮 -->
      <div class="sidebar-section">
        <button class="new-chat-btn" @click="createNewChat">
          <span class="icon">+</span>
          <span>New chat</span>
        </button>
      </div>

      <!-- 对话历史 -->
      <div class="sidebar-section chat-history">
        <div
            v-for="chat in chatHistory"
            :key="chat.conversationId"
            class="chat-item"
            :class="{ active: chat.conversationId === activeChatId }"
            @click="switchChat(chat.conversationId)"
        >
          <div class="chat-title">{{ chat.title }}</div>
        </div>
      </div>

      <!-- 底部菜单 -->
      <div class="sidebar-section sidebar-footer">
        <div class="sidebar-item" @click="clearConversations">
          <img src="@assets/clear-conversations.svg" alt="">
          <span>Clear conversations</span>
        </div>
        <div class="sidebar-item" @click="toggleTheme">
          <img src="@assets/light-mode.svg" alt="">
          <span>Light mode</span>
        </div>
        <div class="sidebar-item">
          <img src="@assets/my-account.svg" alt="">
          <span>My account</span>
        </div>
        <div class="sidebar-item">
          <img src="@assets/updates-faq.svg" alt="">
          <span>Updates & FAQ</span>
        </div>
        <div class="sidebar-item">
          <img src="@assets/logout.svg" alt="">
          <span>Log out</span>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 当没有消息时显示欢迎界面 -->
      <div v-if="chatMessages.length === 0" class="welcome-container">
        <!-- Logo区域 -->
        <div class="logo-section">
          <div class="logo">
            <img src="@assets/logo.svg" alt=""></img>
          </div>
          <h1>ChatGPT <span class="plus-badge">Plus</span></h1>
        </div>

        <!-- 示例、功能和限制区域 -->
        <div class="features-grid">
          <!-- 示例部分 -->
          <div class="feature-column">
            <img src="@assets/examples.svg" alt="">
            <h3>Examples</h3>
            <div class="example-list">
              <div class="example-item" @click="useExample('Explain quantum computing in simple terms')">
                "Explain quantum computing in simple terms"
              </div>
              <div class="example-item" @click="useExample('Got any creative ideas for a 10 year old\'s birthday?')">
                "Got any creative ideas for a 10year old's birthday?"
              </div>
              <div class="example-item" @click="useExample('How do I make an HTTP request in JavaScript?')">
                "How do I make an HTTP request in JavaScript?"
              </div>
            </div>
          </div>

          <!-- 功能部分 -->
          <div class="feature-column">
            <img src="@assets/capabilities.svg" alt="">
            <h3>Capabilities</h3>
            <ul class="capability-list">
              <li>Remembers what user said earlier in the conversation.</li>
              <li>Allows user to provide follow-up corrections.</li>
              <li>Trained to decline inappropriate requests.</li>
            </ul>
          </div>

          <!-- 限制部分 -->
          <div class="feature-column">
            <img src="@assets/limitations.svg" alt="">
            <h3>Limitations</h3>
            <ul class="limitation-list">
              <li>May occasionally generate incorrect information.</li>
              <li>May occasionally produce harmful instructions or biased content.</li>
              <li>Limited knowledge of world and events after 2021.</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 当有消息时显示聊天界面 -->
      <div v-else class="chat-interface">
        <div class="chat-header">
          <h1>ChatGPT <span class="plus-badge">Plus</span></h1>
          <!--          <div class="header-actions">-->
          <!--            <button class="header-btn">-->
          <!--              <span class="icon">⭐</span>-->
          <!--            </button>-->
          <!--            <button class="header-btn">-->
          <!--              <span class="icon">...</span>-->
          <!--            </button>-->
          <!--          </div>-->
        </div>

        <div class="chat-messages" ref="chatMessagesContainer" @scroll="handleScroll">
          <!-- 容器A：80%宽度的主聊天区域 -->
          <div class="chat-container-a">
            <div v-for="message in chatMessages" :key="message.id" class="message-item">
              <!-- 修改消息渲染部分 -->
              <ChatMessage :message="message">
                <template #content>
                  <div class="markdown-body" v-html="renderMarkdown(message.content)"></div>
                  <!-- 流式传输指示器 -->
                  <div v-if="message.isStreaming" class="streaming-indicator">
                    <div class="typing-dots">
                      <span></span>
                      <span></span>
                      <span></span>
                    </div>
                  </div>
                </template>
              </ChatMessage>
            </div>
          </div>
          
          
        </div>
      </div>

      <!-- 输入区域 (始终显示) -->
      <div class="input-area">
        <div class="input-wrapper">
          <div class="left-icons">
            <button class="icon-btn" aria-label="麦克风">
              <img src="@assets/mkphone.svg" alt="">
            </button>
            <button class="icon-btn" aria-label="图片">
              <img src="@assets/image.svg" alt="">
            </button>
          </div>
          <textarea
              v-model="inputMessage"
              placeholder="Type message..."
              @keydown.ctrl.enter="sendMessage"
              @keydown.enter.prevent="sendMessage"
              class="message-input"
              rows="1"
          ></textarea>
          <button class="send-btn" @click="sendMessage" :disabled="!inputMessage.trim() || isStreaming"
                  aria-label="发送消息">
            <img src="@assets/send.svg" alt="">
          </button>
        </div>
      </div>

      <!--      <div class="footer-info">-->
      <!--        <p>提示：按 Enter 发送消息，按 Shift+Enter 换行</p>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
  background-color: var(--color-background);
}

/* 左侧边栏样式 */
.sidebar {
  width: 250px;
  background-color: var(--color-background-soft);
  border-right: 1px solid var(--color-background-mute);
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.sidebar-section {
  margin-bottom: 10px;
}

/* 新建对话按钮 */
.new-chat-btn {
  width: 100%;
  padding: 10px;
  background-color: var(--color-primary);
  color: var(--color-background);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background-color 0.2s;
}

.new-chat-btn:hover {
  background-color: var(--color-primary-light);
}

/* 对话历史 */
.chat-history {
  flex: 1;
  overflow-y: auto;
}

.chat-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  transition: background-color 0.2s;
  border: 1px solid transparent;
}

.chat-item:hover {
  background-color: var(--color-background-mute);
}

.chat-item.active {
  background-color: var(--color-background-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.chat-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* 底部菜单 */
.sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--color-background-mute);
}

.sidebar-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  transition: background-color 0.2s;
}

.sidebar-item:hover {
  background-color: var(--color-background-mute);
}

.sidebar-item img {
  width: 16px;
  height: 16px;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 欢迎界面 */
.welcome-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.logo-section {
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.logo {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.plus-badge {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-light);
  background-color: var(--color-background-soft);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: 8px;
}

/* 功能网格 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 900px;
  width: 100%;
}

.feature-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}

.feature-icon {
  font-size: 32px;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

.feature-column h3 {
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 8px;
  color: var(--color-heading);
}

.feature-column h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--color-primary);
}

/* 示例列表 */
.example-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.example-item {
  background-color: var(--color-background);
  border: 1px solid var(--color-background-mute);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  color: var(--color-text);
}

.example-item:hover {
  background-color: var(--color-background-mute);
  border-color: var(--color-background-mute);
}

/* 功能和限制列表 */
.capability-list,
.limitation-list {
  text-align: left;
  width: 100%;
}

.capability-list li,
.limitation-list li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--color-text);
}

.capability-list li:last-child,
.limitation-list li:last-child {
  margin-bottom: 0;
}

/* 聊天界面 */
.chat-interface {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  padding: 20px;
  border-bottom: 1px solid var(--color-background-mute);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-heading);
}

.header-actions {
  display: flex;
  gap: 10px;
}

.header-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
}

.header-btn:hover {
  background-color: var(--color-background-mute);
}

/* 聊天消息区域样式调整 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 容器A：80%宽度的主聊天区域 */
.chat-container-a {
  width: 80%;
  max-width: 800px;
  min-width: 320px;
}

.message-item {
  width: 100%;
}

/* 输入区域样式 */
.input-area {
  padding: 16px 20px;
  border-top: 1px solid var(--color-background-mute);
  background-color: var(--color-background);
  margin-bottom: 2.5%;
}

.input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--color-background-soft);
  border: 1px solid var(--color-background-mute);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.left-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--color-text);
  padding: 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.icon-btn:hover {
  background-color: var(--color-background-mute);
}

.message-input {
  flex: 1;
  padding: 6px 0;
  border: none;
  resize: none;
  font-size: 16px;
  min-height: 24px;
  max-height: 200px;
  font-family: inherit;
  background-color: transparent;
  color: var(--color-text);
  line-height: 1.4;
  outline: none;
}

.message-input::placeholder {
  color: var(--color-text-light-2);
}

.send-btn {
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.1s;
  flex-shrink: 0;
  background-color: var(--color-primary);
  color: var(--color-background);
}

.send-btn:hover:not(:disabled) {
  background-color: var(--color-primary-light);
  transform: translateY(-1px);
}

.send-btn:active:not(:disabled) {
  transform: translateY(0);
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.undo-btn {
  background: transparent;
  border: none;
  color: var(--color-text);
  padding: 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
  flex-shrink: 0;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.undo-btn:hover {
  background-color: var(--color-background-mute);
}

.footer-info {
  padding: 10px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-light-2);
}

/* 图标样式 */
.icon {
  display: inline-block;
  width: 20px;
  text-align: center;
}

/* 滚动条样式 */
.chat-history::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-history::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
  background: var(--color-background);
}

.chat-history::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.chat-history::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-hover);
}

/* 流式传输指示器样式 */
.streaming-indicator {
  margin-top: 8px;
  display: flex;
  align-items: center;
}

.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  30% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .welcome-container {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    display: none;
  }
  
  .chat-container-a {
    width: 95%;
  }
  
  .input-wrapper {
    margin: 0 10px;
  }
}
</style>